<template>
  <div>
    <h1>发布需求页</h1>
    <p>
      <el-button @click="dian1">按项目收费</el-button
      ><el-button @click="dian">按时间计费</el-button>
    </p>
    <div v-show="isshow">
      <el-input placeholder="请输入标题" v-model="form.title"></el-input>

      <!-- <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload> -->

      <el-tabs :tab-position="tabPosition" style="height: 200px">
        <el-tab-pane :label="i.name" v-for="(i, j) in list" :key="j">
          <div v-for="(x, p) in i.son" :key="p">
            {{ x.name }}
            <div v-for="(o, y) in x.son" :key="y">
              {{ o.name }}
              <div v-for="(f, l) in o.son" :key="l">
                <el-button @click="qi(i.name, x.name, o.name, f.name, f.id)">{{
                  f.name
                }}</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-input placeholder="请输入需求类型" v-model="form.type"></el-input>
      <el-input placeholder="请输入需求预算" v-model="form.price"></el-input>

      <el-input placeholder="请输入手机号" v-model="form.mobile"></el-input>
      <p>
        <el-button @click="chose">企业</el-button>
        <el-button @click="chose1">个人</el-button>
        <el-button @click="chose2">政府组织</el-button>
      </p>
    </div>

    <div v-show="issshow">
      <el-input placeholder="请输入标题" v-model="form.title"></el-input>

      <!-- <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload> -->

      <el-tabs :tab-position="tabPosition" style="height: 200px">
        <el-tab-pane :label="i.name" v-for="(i, j) in lists" :key="j">
          <div v-for="(x, p) in i.son" :key="p">
            {{ x.name }}
            <div v-for="(o, y) in x.son" :key="y">
              <el-button @click="qi1(i.name, x.name, o.name, o.id)">{{
                o.name
              }}</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-input
        placeholder="请输入需求人才类型"
        v-model="form.type1"
      ></el-input>

      <el-input
        placeholder="请输入雇佣市场 单位天"
        v-model="form.time"
      ></el-input>
      <el-input placeholder="请输入日均工时" v-model="form.day_time"></el-input>
      <el-input
        placeholder="请输入时薪金额"
        v-model="form.hour_money"
      ></el-input>

      <el-input placeholder="请输入手机号" v-model="form.mobile"></el-input>
      <p>
        <el-button @click="chose3">企业</el-button>
        <el-button @click="chose4">个人</el-button>
        <el-button @click="chose5">政府组织</el-button>
      </p>
    </div>
    <el-button @click="submit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabPosition: "left",
      list: [],
      lists: [],
      form: {
        fangshi: "",
        title: "",
        price: "",
        mobile: "",
        shoseid: "",
        type: "",
        cateid: "",
        userid: localStorage.getItem("userid"),
        time: "",
        day_time: "",
        hour_money: "",
        type1: "",
      },
      isshow: true,
      issshow: false,
    };
  },
  methods: {
    submit() {
      this.axios.post("/addneed", this.form).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          alert(res.data.msg);
        } else {
          alert(res.data.msg);
          this.$router.push("/chongzhi");
        }
      });
    },
    getxiangmu() {
      this.axios.get("/send_need_cate").then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    gettime() {
      this.axios.get("/send_need_people_cate").then((res) => {
        console.log(res);
        this.lists = res.data.data;
      });
    },
    qi(q, w, e, r, id) {
      this.form.type = q + "/" + w + "/" + e + "/" + r;
      this.form.cateid = id;
    },
    qi1(q, w, e, id) {
      this.form.type1 = q + "/" + w + "/" + e;
      this.form.cateid = id;
    },
    dian() {
      this.form.fangshi = 2;
      alert(this.form.fangshi);
      this.isshow = false;
      this.issshow = true;
    },
    dian1() {
      this.form.fangshi = 1;
      alert(this.form.fangshi);
      this.isshow = true;
      this.issshow = false;
    },
    chose() {
      this.form.shoseid = 1;
      alert(this.form.shoseid);
    },
    chose1() {
      this.form.shoseid = 2;
      alert(this.form.shoseid);
    },
    chose2() {
      this.form.shoseid = 3;
      alert(this.form.shoseid);
    },
    chose3() {
      this.form.shoseid = 1;
      alert(this.form.shoseid);
    },
    chose4() {
      this.form.shoseid = 2;
      alert(this.form.shoseid);
    },
    chose5() {
      this.form.shoseid = 3;
      alert(this.form.shoseid);
    },
  },
  mounted() {
    this.getxiangmu();
    this.gettime();
  },
};
</script>

<style>
</style>